<template>
  <button
    :type="nativeType"
    :disabled="disabled"
    :autofocus="autofocus"
    @click="(e) => $emit('click', e)"
    class="el-button"
    :class="[
      type ? `el-button--${type}` : '',
      size ? `el-button--${size}` : '',
      {
        'is-round': round,
        'is-plain': plain,
        'is-circle': circle,
        'is-disabled': disabled,
      },
    ]"
  >
    <!-- 图标 loading优先级较高-->
    <i :class="icon" v-if="icon && !loading" />
    <!-- loading -->
    <i class="el-icon-loading" v-if="loading" />
    <!-- button + icon -->
    <span v-if="$slots.default">
      <slot />
    </span>
  </button>
</template>

<script>
export default {
  name: "ElButton",
  props: {
    size: {
      type: String,
      validator: (val) => ["medium", "small", "mini"].includes(val),
    },
    type: {
      type: String,
      validator: (val) => ["primary", "success", "warning", "danger", "info", "text"].includes(val),
    },
    nativeType: {
      type: String,
      validator: (val) => ["button", "submit", "reset"].includes(val),
      default: "button",
    },
    plain: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    icon: String,
    autofocus: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
